@charset "utf-8";
@import "../../../layout/sass/_mixin-fun.scss";

.wrapstep {
	padding: 0 60px;
	.step{
		width: 300px;
		height: 75px;
		float: left;
		text-align: center;
		color: #888888;
		.number{
			font-size: 36px;
			line-height: 75px;
		}
		.chinese{
			font-size: 24px;
			line-height: 75px;
		}
		&.active {
			color: rgba(232,100,90,1);
		}
	}
}
.long{
	width: 1020px;
	margin-bottom: 0px;
	margin-top: 0px;
}
form.fourth {
	margin-top: 40px;
	div.identity {
		width: 100%;
		margin-bottom: 24px;
		position: relative;
		label {
			float: left;
			display: block;
			height: 30px;
			line-height: 30px;
			text-align: right;
			width: 150px;
			font-size: 18px;
			color: $global-color;
			span.must {
				color: #de4a4a;
			}
		}
		.input {
			float: left;
			display: block;
			width: 80%;
			margin-left: 30px;
			height: 30px;
			line-height: 30px;
			position: relative;
			font-size: 16px;
			input, p {
				width: 200px;
				height: 30px;
				line-height: 30px;
				color: #888888;
				border-bottom: 1px solid rgba(171,135,91,1);
			}
			input.add-detail {
				width: 354px;
			}
			input {
				&::-webkit-input-placeholder, &::-moz-placeholder, &:-ms-input-placeholder {
					color: #a7a7a7;
				}
			}
			span.checkbox {
				height: 30px;
				line-height: 30px;
				float: left;
				display: block;
				position: relative;
				padding-left: 24px;
				color: #888888;
				cursor: pointer;
				margin-right: 20px;
				i {
					position: absolute;
					top: 50%;
					left: 0;
					margin-top: -8px;
					cursor: pointer;
				}
				input[type=checkbox] {
					height: 100%;
					width: 100%;
					z-index: 3;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					filter: Alpha(opacity=0);
					cursor: pointer;
					&:checked {
						& + i {
							background-position: -234px 0;
						}
					}
				}
				&.other {
					input[type=text] {
						position: absolute;
						width: 80px;
						height: 30px;
						line-height: 30px;
						right: -90px;
						top: 0;
					}
				}
			}
			.select {
				height: 30px;
				line-height: 30px;
				color: rgba(136,136,136,1);
				position: relative;
				width: 110px;
				float: left;
				margin-right: 20px;
				select {
					height: 30px;
					line-height: 30px;
					z-index: 2;
					width: 86%;
					border-bottom: 1px solid rgba(171,135,91,1);
					position: relative;
					appearance:none;
				  	-moz-appearance:none;
				  	-webkit-appearance:none;
				  	background: none;
				}
				select::-ms-expand { display: none; }
				i {
					position: absolute;
					width: 0;
					height: 0;
					&.t-1 {
						border: {
							top: 10px solid rgba(197,197,197,1);
							left: 8px solid transparent;
							right: 8px solid transparent;
						}
						right: 0;
						top: 50%;
						margin-top: -5px;
					}
					&.t-2 {
						border: {
							top: 7px solid white;
							left: 6px solid transparent;
							right: 6px solid transparent;
						}
						right: 2px;
						top: 50%;
						margin-top: -5px;
					}
				}
			}//select
			.tips {
				position: absolute;
				top: 0;
				left: 205px;
				padding: 0;
				height: 30px;
				line-height: 30px;
				padding-left: 26px;
				color: #a7a7a7;
				&.address {
					left: 360px;
				}
				.icon {
					position: absolute;
					top: 50%;
					left: 0;
					margin-top: -8px;
				}
				.rt-fa{
					margin-top: -8px;
					position: absolute;
					top: 50%;
					left: 4px;
				}
			}//tips
		}//input
	}
	button {
		width: 160px;
		height: 40px;
		color: white;
		background: #de4a4a;
		font-size: 18px;
		display: block;
		margin-top: 40px;
		margin-left: 180px;
		border-radius: 4px;
	}
	a.his-back {
		position: absolute;
		bottom: 11px;
		left: 355px;
		color: #a7a7a7;
		font-size: 14px;
	}
}//form

.upload {
	width: 100%;
	p.tips {
		width: 100%;
		text-align: center;
		color: rgba(221,73,76,1);
		margin-top: 22px;
		line-height: 30px;
		span {
			padding-left: 30px;
			position: relative;
			margin-right: 35px;
			i {
				position: absolute;
				top: 50%;
				left: 0;
				&.icon-tuisong {
					margin-top: -11px;
				}
				&.icon-ydy {
					margin-top: -12px;
				}
			}
		}
	}//tips
	.pictures {
		margin-top: 54px;
		width: 100%;
		position: relative;
		.one {
			position: relative;
			width: 100%;
			label {
				float: left;
				display: block;
				text-align: right;
				width: 33.3%;
				color: $global-color;
				font-size: 18px;
				line-height: 80px;
				span.must {
					color: #de4a4a;
				}
			}
			.input {
				float: right;
				display: block;
				margin-bottom: 20px;
				width: 66.7%;
				padding-left: 20px;
				position: relative;
				input[type="file"] {
					height: 40px;
					width: 340px;
					opacity: 0;
					filter: Alpha(opacity=0);
					background: none;
					z-index: 2;
					position: relative;
				}
				input.hidden {
					display: none;
				}
				p {
					height: 40px;
					width: 340px;
					border-bottom: 1px solid $global-color;
					top: 20px;
					left: 20px;
					line-height: 40px;
					color: rgba(139,139,139,1);
					font-size: 18px;
					position: absolute;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				img {
					width: 60px;
					height: 60px;
					margin-left: 10px;
				}
				span {
					position: absolute;
					top: 68px;
					left: 20px;
					color: rgba(202,202,202,1);
					font-size: 14px;
				}
			}//input
		}//one
	}//pictures
	> .btns {
		margin-top: 70px;
		padding-left: 360px;
		.apply {
			width: 100px;
			height: 40px;
			background: rgba(220,75,78,1);
			color: white;
			font-size: 18px;
			margin-right: 20px;
			float: left;
			border-radius: 3px;
		}//apply
		.pass {
			float: left;
			font-size: 18px;
			line-height: 40px;
			text-align: center;
			width: 100px;
			height: 40px;
			background: white;
			border: 1px solid rgba(220,75,78,1);
			color: rgba(220,75,78,1);
			cursor: pointer;
			border-radius: 3px;
		}
	}//btn
}//upload

.sixth {
	width: 100%;
	height: 300px;
	margin-top: 116px;
	position: relative;
	p {
		text-align: center;
		line-height: 30px;
		color: rgba(202,202,202,1);
		font-size: 18px;
		span {
			color: $global-color;
			font-size: 24px;
			margin-right: 10px;
		}
	}
	a {
		display: block;
		width: 100px;
		height: 38px;
		background: rgba(220,75,78,1);
		color: white;
		font-size: 18px;
		text-align: center;
		line-height: 38px;
		text-decoration: none;
		margin: 40px auto;
		border-radius: 3px;
	}
	.bottom {
		position: absolute;
		bottom: -120px;
		left: 0;
		width: 100%;
		height: 190px;
		padding: 60px 50px 0 50px;
		img {
			position: absolute;
			left: 50%;
			width: 1200px;
			margin-left: -600px;
		}
		.block {
			width: 25%;
			float: left;
			position: relative;
			i {
				background: url(/img/icons.png) no-repeat;
				width: 52px;
				height: 52px;
				display: block;
				&.b1 {
					background-position: -1px -156px;
				}
				&.b2 {
					background-position: -54px -156px;
				}
				&.b3 {
					background-position: -108px -156px;
				}
				&.b4 {
					background-position: -162px -156px;
				}
			}
			p.t1 {
				position: absolute;
				top: 0;
				left: 60px;
				font-size: 18px;
				font-weight: 700;
				color: #de4a4a;
			}
			p.t2 {
				position: absolute;
				bottom: 0;
				left: 60px;
				font-size: 14px;
				color: #888888;
			}
		}
	}//bottom
}